"use client";

import { ArrowRight, Loader2, Pause, Play, Save, Trash2 } from "lucide-react";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { Suspense, useEffect, useState } from "react";
import { DashboardLayout } from "@/components/layout/dashboard-layout";
import { OnboardingFooter } from "@/components/layout/onboarding-footer";
import { PageHeader } from "@/components/layout/page-header";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { CountryFlag } from "@/components/ui/country-flag";
import { Input } from "@/components/ui/input";
import { Select } from "@/components/ui/select";
import { INDUSTRIES, TARGET_COUNTRIES, TIMEZONES } from "@/lib/constants";
import { cn } from "@/lib/utils";
import type { ProjectStatus } from "@/types/workflow";
import { selectActiveProject, useProjectsHydrated } from "@/hooks/use-projects-hydrated";
import { useProjectsStore } from "@/store/projects-store";

function resolvePageTitle(isNew: boolean, editId: string | null): string {
  if (isNew) return "New Project";
  if (editId) return "Edit Project";
  return "My Project";
}

function MyProjectLoading({ title }: { title: string }) {
  return (
    <DashboardLayout requireHydration={false}>
      <PageHeader
        title={title}
        subtitle="Create or update a project — each project has its own brand, context, and posts"
      />
      <div className="flex flex-1 items-center justify-center px-8 pb-32 pt-12">
        <Loader2 className="h-8 w-8 animate-spin text-brand-600" aria-label="Loading project" />
      </div>
    </DashboardLayout>
  );
}

function MyProjectContent() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const hydrated = useProjectsHydrated();

  const isNew = searchParams.get("new") === "1";
  const rawEditId = searchParams.get("edit");
  const hasEditParam = Boolean(rawEditId);
  const hasRouteMode = isNew || hasEditParam;
  const pageTitle = resolvePageTitle(isNew, hasEditParam ? rawEditId : null);

  const projects = useProjectsStore((s) => s.projects);
  const activeProjectId = useProjectsStore((s) => s.activeProjectId);
  const switchProject = useProjectsStore((s) => s.switchProject);
  const createProject = useProjectsStore((s) => s.createProject);
  const updateProject = useProjectsStore((s) => s.updateProject);
  const deleteProject = useProjectsStore((s) => s.deleteProject);
  const activeProject = useProjectsStore(selectActiveProject);

  const resolvedEditId =
    rawEditId === "active" ? activeProjectId : rawEditId;

  const isCreateMode = isNew;
  const editingProject =
    hydrated && !isNew && resolvedEditId
      ? (projects.find((p) => p.id === resolvedEditId) ?? null)
      : null;

  const [name, setName] = useState("");
  const [website, setWebsite] = useState("");
  const [industry, setIndustry] = useState<string>(INDUSTRIES[0]);
  const [timezone, setTimezone] = useState<string>(TIMEZONES[0]);
  const [selectedCountries, setSelectedCountries] = useState<string[]>(
    TARGET_COUNTRIES.map((c) => c.code),
  );
  const [error, setError] = useState("");
  const [saving, setSaving] = useState(false);
  const [saved, setSaved] = useState(false);
  const [formInitialized, setFormInitialized] = useState(false);

  useEffect(() => {
    if (!hydrated) return;
    if (rawEditId === "active") {
      const active = useProjectsStore.getState().activeProjectId;
      router.replace(active ? `/my-project?edit=${active}` : "/my-project?new=1");
      return;
    }
    if (!hasRouteMode) {
      const active = useProjectsStore.getState().activeProjectId;
      router.replace(active ? `/my-project?edit=${active}` : "/my-project?new=1");
    }
  }, [hydrated, hasRouteMode, rawEditId, router]);

  useEffect(() => {
    if (!hydrated || !resolvedEditId || resolvedEditId === activeProjectId) return;
    switchProject(resolvedEditId);
  }, [hydrated, resolvedEditId, activeProjectId, switchProject]);

  useEffect(() => {
    if (!hydrated || isNew || !editingProject || formInitialized) return;
    setName(editingProject.name);
    setWebsite(editingProject.website);
    setIndustry(editingProject.industry);
    setTimezone(editingProject.timezone);
    setSelectedCountries(editingProject.countries);
    setFormInitialized(true);
  }, [hydrated, isNew, editingProject, formInitialized]);

  useEffect(() => {
    if (isNew) {
      setFormInitialized(false);
    }
  }, [isNew]);

  const toggleCountry = (code: string) => {
    setSelectedCountries((prev) =>
      prev.includes(code) ? prev.filter((c) => c !== code) : [...prev, code],
    );
  };

  const handleCreateProject = () => {
    setError("");
    const trimmedName = name.trim();
    if (!trimmedName) {
      setError("Project name is required.");
      return;
    }
    if (selectedCountries.length === 0) {
      setError("Select at least one target country.");
      return;
    }

    setSaving(true);
    const id = createProject({
      name: trimmedName,
      website: website.trim(),
      industry,
      timezone,
      countries: selectedCountries,
      status: "active",
    });

    if (!id) {
      setError("Could not create project.");
      setSaving(false);
      return;
    }

    window.location.href = "/brand-profile";
  };

  const handleSaveEdits = () => {
    if (!editingProject) return;
    setError("");
    const trimmedName = name.trim();
    if (!trimmedName) {
      setError("Project name is required.");
      return;
    }

    updateProject(editingProject.id, {
      name: trimmedName,
      website: website.trim(),
      industry,
      timezone,
      countries: selectedCountries,
    });
    setSaved(true);
    setTimeout(() => setSaved(false), 2500);
  };

  const handleStatusChange = (status: ProjectStatus) => {
    if (!editingProject) return;
    updateProject(editingProject.id, { status });
  };

  const handleDelete = () => {
    if (!editingProject) return;
    if (!confirm(`Delete "${editingProject.name}"?`)) return;
    const ok = deleteProject(editingProject.id);
    if (ok) router.push("/dashboard");
    else setError("Cannot delete the only project.");
  };

  const waitingForStore = !isNew && !hydrated;
  const waitingForRedirect =
    hydrated && (!hasRouteMode || rawEditId === "active");
  const waitingForProject =
    hydrated && !isNew && resolvedEditId && !editingProject && rawEditId !== "active";

  if (waitingForStore || waitingForRedirect || waitingForProject) {
    return <MyProjectLoading title={pageTitle} />;
  }

  const projectReady = isCreateMode ? false : Boolean(editingProject ?? activeProject);

  return (
    <DashboardLayout requireHydration={false}>
      <PageHeader
        title={pageTitle}
        subtitle="Create or update a project — each project has its own brand, context, and posts"
      />
      <div className="flex flex-1 flex-col">
        <div className="flex-1 px-4 pb-32 pt-2 sm:px-6 lg:px-8">
          {projects.length > 0 && (
            <Card className="mb-6 p-4">
              <p className="mb-3 text-sm font-semibold text-gray-900">Your projects</p>
              <div className="flex flex-wrap gap-2">
                {projects.map((p) => (
                  <button
                    key={p.id}
                    type="button"
                    onClick={() => router.push(`/my-project?edit=${p.id}`)}
                    className={cn(
                      "rounded-full border px-3 py-1 text-sm transition-colors",
                      editingProject?.id === p.id
                        ? "border-brand-600 bg-brand-50 text-brand-800"
                        : "border-gray-200 text-gray-600 hover:border-gray-300",
                    )}
                  >
                    {p.name}
                  </button>
                ))}
                <Link
                  href="/my-project?new=1"
                  className="rounded-full border border-dashed border-gray-300 px-3 py-1 text-sm text-gray-500 hover:border-brand-400"
                >
                  + New
                </Link>
              </div>
            </Card>
          )}

          {editingProject && !isCreateMode && (
            <Card className="mb-6">
              <div className="flex flex-wrap items-center justify-between gap-4">
                <div>
                  <p className="text-sm font-semibold text-gray-900">Project status</p>
                  <p className="mt-1 text-sm text-gray-500">
                    Only <strong>Active</strong> projects generate and publish posts.
                  </p>
                </div>
                <div className="flex gap-2">
                  <Button
                    type="button"
                    size="sm"
                    variant={editingProject.status === "active" ? "teal" : "secondary"}
                    onClick={() => handleStatusChange("active")}
                  >
                    <Play className="h-4 w-4" />
                    Active
                  </Button>
                  <Button
                    type="button"
                    size="sm"
                    variant={editingProject.status === "paused" ? "primary" : "secondary"}
                    onClick={() => handleStatusChange("paused")}
                  >
                    <Pause className="h-4 w-4" />
                    Paused
                  </Button>
                </div>
              </div>
            </Card>
          )}

          <div className="mx-auto grid max-w-5xl gap-6 lg:grid-cols-2">
            <Card title="Project Details">
              <div className="space-y-5">
                <Input
                  label="Project Name"
                  id="project-name"
                  placeholder="e.g. Acme Corp"
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                />
                <Input
                  label="Website URL"
                  id="website-url"
                  placeholder="https://example.com"
                  value={website}
                  onChange={(e) => setWebsite(e.target.value)}
                />
                <div className="grid gap-5 sm:grid-cols-2">
                  <Select
                    label="Industry"
                    id="industry"
                    options={INDUSTRIES}
                    value={industry}
                    onChange={(e) => setIndustry(e.target.value)}
                  />
                  <Select
                    label="Timezone"
                    id="timezone"
                    options={TIMEZONES}
                    value={timezone}
                    onChange={(e) => setTimezone(e.target.value)}
                  />
                </div>
              </div>
            </Card>

            <Card
              title="Target Countries"
              subtitle="Markets where your audience is — used for reach analytics and scheduling."
            >
              <div className="flex flex-wrap gap-2">
                {TARGET_COUNTRIES.map((country) => {
                  const selected = selectedCountries.includes(country.code);
                  return (
                    <button
                      key={country.code}
                      type="button"
                      onClick={() => toggleCountry(country.code)}
                      className={cn(
                        "inline-flex items-center gap-2 rounded-full border px-3.5 py-1.5 text-sm font-medium transition-colors",
                        selected
                          ? "border-brand-600 bg-brand-50 text-brand-800"
                          : "border-gray-200 bg-gray-50 text-gray-400 opacity-60",
                      )}
                    >
                      <CountryFlag code={country.code} />
                      {country.name}
                    </button>
                  );
                })}
              </div>
            </Card>
          </div>

          {error && (
            <p className="mt-4 text-sm font-medium text-red-600" role="alert">
              {error}
            </p>
          )}
          {saved && (
            <p className="mt-4 text-sm font-medium text-green-700">Project saved.</p>
          )}

          <div className="mt-8 flex flex-wrap justify-end gap-3">
            {editingProject && !isCreateMode && projects.length > 1 && (
              <Button type="button" variant="ghost" onClick={handleDelete}>
                <Trash2 className="h-4 w-4" />
                Delete project
              </Button>
            )}
            {isCreateMode ? (
              <Button type="button" onClick={handleCreateProject} disabled={saving}>
                {saving ? (
                  <>
                    <Loader2 className="h-4 w-4 animate-spin" />
                    Creating…
                  </>
                ) : (
                  <>
                    Create Project
                    <ArrowRight className="h-4 w-4" />
                  </>
                )}
              </Button>
            ) : (
              <Button type="button" onClick={handleSaveEdits}>
                <Save className="h-4 w-4" />
                Save changes
              </Button>
            )}
          </div>
        </div>
      </div>
      <OnboardingFooter
        currentStep={1}
        nextDisabled={!projectReady && isCreateMode}
        onBeforeNext={() => {
          if (!projectReady) {
            setError("Create or select a project before continuing.");
            return false;
          }
          return true;
        }}
      />
    </DashboardLayout>
  );
}

export default function MyProjectPage() {
  return (
    <Suspense fallback={<MyProjectLoading title="My Project" />}>
      <MyProjectContent />
    </Suspense>
  );
}