"use client";

import { getDocumentIntlLocale } from "@/lib/i18n/browser";
import { useTranslations } from "@/components/i18n/i18n-provider";
import {
  completeProjectRecord,
  createProjectRecord,
  updateProjectRecord,
} from "@/app/(dashboard)/projects/actions";
import { LocalizedFields, type LocalizedFieldLocale, type LocalizedFieldValues } from "@/components/i18n/localized-fields";
import { PendingLink } from "@/components/ui/pending-link";
import { PendingSubmitButton } from "@/components/ui/pending-submit-button";
import { contentTranslationRegistry } from "@/lib/i18n/content";
import { Badge, Button, Card, CardContent, Input, Label } from "poyraz-ui/atoms";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
  toast,
} from "poyraz-ui/molecules";
import {
  CalendarDays,
  CheckCircle2,
  Eye,
  FolderKanban,
  ImageIcon,
  LayoutGrid,
  List,
  Pencil,
  Plus,
  Target,
  Wallet,
  Brain,
  Loader2,
} from "lucide-react";
import Image from "next/image";
import { useRouter } from "next/navigation";
import { useEffect, useState, useTransition, type ChangeEvent } from "react";
import { StatCard } from "@/components/system/stat-card";

export type ProjectClientOption = {
  id: string;
  name: string;
};

export type ProjectListItem = {
  id: string;
  client_id: string | null;
  clientName: string | null;
  name: string;
  type: "client_project" | "side_project";
  description: string | null;
  status: "planning" | "active" | "paused" | "completed" | "cancelled";
  start_date: string | null;
  due_date: string | null;
  budget_amount: number | null;
  currency: string;
  progress: number;
  cover_image_path: string | null;
  cover_image_alt: string | null;
  coverImageUrl: string | null;
  taskCount: number;
  doneTaskCount: number;
  translations?: LocalizedFieldValues;
};

const typeLabels = (t: any) => ({
  client_project: t("projects.types.client"),
  side_project: t("projects.types.side"),
});

const statusLabels = (t: any) => ({
  planning: t("projects.status.planning"),
  active: t("projects.status.active"),
  paused: t("projects.status.paused"),
  completed: t("projects.status.completed"),
  cancelled: t("projects.status.cancelled"),
});

const statusClasses = {
  planning: "border-blue-200 bg-blue-50 text-blue-700",
  active: "border-emerald-200 bg-emerald-50 text-emerald-700",
  paused: "border-amber-200 bg-amber-50 text-amber-700",
  completed: "border-zinc-200 bg-zinc-50 text-zinc-700",
  cancelled: "border-rose-200 bg-rose-50 text-rose-700",
};

type ProjectsClientProps = {
  projects: ProjectListItem[];
  clients: ProjectClientOption[];
  localization: {
    defaultLocale: string;
    locales: LocalizedFieldLocale[];
  };
};

export function ProjectsClient({ projects, clients, localization }: ProjectsClientProps) {
  const t = useTranslations();
  const [query, setQuery] = useState("");
  const [view, setView] = useState<"grid" | "list">("grid");
  const normalizedQuery = query.trim().toLowerCase();
  const types = typeLabels(t);

  const filteredProjects = normalizedQuery
    ? projects.filter((project) =>
        [project.name, project.description, project.clientName, types[project.type]]
          .filter(Boolean)
          .some((value) => value!.toLowerCase().includes(normalizedQuery)),
      )
    : projects;

  const activeCount = projects.filter((project) => project.status === "active").length;
  const sideProjectCount = projects.filter((project) => project.type === "side_project").length;
  const averageProgress = projects.length
    ? Math.round(projects.reduce((sum, project) => sum + project.progress, 0) / projects.length)
    : 0;
  const totalBudget = projects.reduce((sum, project) => sum + (project.budget_amount || 0), 0);

  return (
    <div className="mx-auto flex max-w-7xl flex-col gap-6">
      <div className="flex flex-col gap-4 border-b border-border pb-5 lg:flex-row lg:items-end lg:justify-between">
        <div>
          <h1 className="text-3xl font-semibold tracking-normal text-foreground">
            {t("projects.title")}
          </h1>
        </div>

        <div className="flex gap-2">
          <AIProjectRiskDialog />
          <ProjectDialog mode="create" clients={clients} localization={localization} />
        </div>
      </div>

      <div className="grid gap-3 md:grid-cols-4">
        <StatCard label={t("projects.stats.active")} value={activeCount.toString()} icon={FolderKanban} tone="green" />
        <StatCard label={t("projects.stats.side")} value={sideProjectCount.toString()} icon={Target} tone="blue" />
        <StatCard label={t("projects.stats.progress")} value={`${averageProgress}%`} icon={CheckCircle2} tone="amber" />
        <StatCard label={t("projects.stats.budget")} value={formatCurrency(totalBudget)} icon={Wallet} tone="red" />
      </div>

      <Card>
        <CardContent className="space-y-4 p-4">
          <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
            <div>
              <h2 className="text-base font-semibold text-foreground">{t("projects.list.title")}</h2>
              <p className="text-sm text-muted-foreground">
                {t("projects.list.count", { count: filteredProjects.length })}
              </p>
            </div>
            <div className="flex flex-col gap-2 sm:flex-row">
              <Input
                value={query}
                onChange={(event) => setQuery(event.target.value)}
                placeholder={t("projects.list.search")}
                className="sm:w-80"
              />
              <div className="flex rounded-sm border border-border p-1">
                <Button size="sm" effect="shine"
                  type="button"
                  variant={view === "grid" ? "default" : "secondary"}
                  className="gap-2 px-3"
                  onClick={() => setView("grid")}
                >
                  <LayoutGrid className="h-4 w-4" />
                  {t("projects.list.grid")}
                </Button>
                <Button size="sm" effect="shine"
                  type="button"
                  variant={view === "list" ? "default" : "secondary"}
                  className="gap-2 px-3"
                  onClick={() => setView("list")}
                >
                  <List className="h-4 w-4" />
                  {t("projects.list.list")}
                </Button>
              </div>
            </div>
          </div>

          {filteredProjects.length > 0 ? (
            view === "grid" ? (
              <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
                {filteredProjects.map((project) => (
                  <ProjectCard key={project.id} project={project} clients={clients} localization={localization} />
                ))}
              </div>
            ) : (
              <div className="overflow-x-auto rounded-sm border border-border">
                <div className="min-w-[800px]">
                  <div className="grid grid-cols-[1.5fr_1fr_1fr_0.8fr_1fr] gap-4 border-b border-border bg-muted/40 px-4 py-3 text-xs font-medium uppercase text-muted-foreground">
                    <span>{t("projects.list.columns.project")}</span>
                    <span>{t("projects.list.columns.type")}</span>
                    <span>{t("projects.list.columns.status")}</span>
                    <span className="text-center">{t("projects.list.columns.budgetDeadline")}</span>
                    <span className="sr-only">İşlemler</span>
                  </div>
                  <div className="divide-y divide-border">
                    {filteredProjects.map((project) => (
                      <ProjectRow key={project.id} project={project} clients={clients} localization={localization} />
                    ))}
                  </div>
                </div>
              </div>
            )
          ) : (
            <EmptyState hasQuery={Boolean(normalizedQuery)} />
          )}
        </CardContent>
      </Card>
    </div>
  );
}

function ProjectCard({
  project,
  clients,
  localization,
}: {
  project: ProjectListItem;
  clients: ProjectClientOption[];
  localization: ProjectsClientProps["localization"];
}) {
  const t = useTranslations();
  const router = useRouter();
  const [isNavigating, startNavigation] = useTransition();
  const detailHref = `/projects/${project.id}`;

  function goToProjectDetail() {
    startNavigation(() => {
      router.push(detailHref);
    });
  }

  function prefetchProjectDetail() {
    router.prefetch(detailHref);
  }

  return (
    <Card
      role="link"
      tabIndex={0}
      aria-label={`${project.name} detayına git`}
      aria-busy={isNavigating}
      className={
        isNavigating
          ? "relative cursor-progress opacity-80 transition-colors ring-2 ring-primary/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
          : "relative cursor-pointer transition-colors hover:border-primary/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
      }
      onClick={goToProjectDetail}
      onMouseEnter={prefetchProjectDetail}
      onFocus={prefetchProjectDetail}
      onKeyDown={(event) => {
        if (event.key === "Enter" || event.key === " ") {
          event.preventDefault();
          goToProjectDetail();
        }
      }}
    >
      <CardContent className="flex h-full flex-col gap-5 p-5">
        {isNavigating ? (
          <div className="absolute inset-0 z-10 flex items-center justify-center rounded-sm bg-background/70 backdrop-blur-[1px]">
            <Loader2 className="h-5 w-5 animate-spin text-primary" />
          </div>
        ) : null}
        <ProjectCover project={project} />
        <div className="flex items-start justify-between gap-3">
          <div className="min-w-0">
            <h3 className="truncate text-lg font-semibold text-foreground">{project.name}</h3>
            <p className="mt-1 line-clamp-2 text-sm text-muted-foreground">
              {project.description || t("projects.card.noDescription")}
            </p>
          </div>
          <Badge variant="outline" className={statusClasses[project.status]}>
            {statusLabels(t)[project.status]}
          </Badge>
        </div>

        <ProjectMeta project={project} />
        <ProgressBar progress={project.progress} />

        <div className="mt-auto flex items-center justify-between gap-2 border-t border-border pt-4">
          <div className="text-xs text-muted-foreground">
            {t("projects.card.taskProgress", { done: project.doneTaskCount, total: project.taskCount })}
          </div>
          <ProjectActions project={project} clients={clients} localization={localization} showDetail={false} />
        </div>
      </CardContent>
    </Card>
  );
}

function ProjectCover({ project }: { project: ProjectListItem }) {
  const t = useTranslations();
  if (project.coverImageUrl) {
    return (
      <div className="relative aspect-video overflow-hidden rounded-sm border border-border bg-muted">
        <Image
          src={project.coverImageUrl}
          alt={project.cover_image_alt || project.name}
          fill
          sizes="(min-width: 1280px) 30vw, (min-width: 768px) 45vw, 100vw"
          unoptimized
          className="object-cover"
        />
      </div>
    );
  }

  return (
    <div className="flex aspect-video items-center justify-center rounded-sm border border-dashed border-border bg-muted/30 text-sm text-muted-foreground">
      {t("projects.card.noCover")}
    </div>
  );
}

function ProjectRow({
  project,
  clients,
  localization,
}: {
  project: ProjectListItem;
  clients: ProjectClientOption[];
  localization: ProjectsClientProps["localization"];
}) {
  const t = useTranslations();
  return (
    <div className="grid gap-4 px-4 py-4 grid-cols-[1.5fr_1fr_1fr_0.8fr_1fr] items-center">
      <div className="min-w-0">
        <div className="font-medium text-foreground">{project.name}</div>
        <div className="truncate text-sm text-muted-foreground">
          {project.clientName || t("projects.card.noClient")}
        </div>
      </div>
      <div className="text-sm text-muted-foreground">{typeLabels(t)[project.type]}</div>
      <div>
        <Badge variant="outline" className={statusClasses[project.status]}>{statusLabels(t)[project.status]}</Badge>
      </div>
      <div>
        <ProgressBar progress={project.progress} compact />
      </div>
      <div className="flex justify-end gap-2">
        <ProjectActions project={project} clients={clients} localization={localization} showDetail />
      </div>
    </div>
  );
}

function ProjectMeta({ project }: { project: ProjectListItem }) {
  const t = useTranslations();
  return (
    <div className="grid gap-2 text-sm text-muted-foreground">
      <div>{typeLabels(t)[project.type]}</div>
      <div>{project.clientName || t("projects.card.noClient")}</div>
      <div className="flex items-center gap-2">
        <CalendarDays className="h-4 w-4" />
        {project.due_date ? formatDate(project.due_date) : t("projects.card.noDeadline")}
      </div>
      <div>{project.budget_amount ? formatCurrency(project.budget_amount) : t("projects.card.noBudget")}</div>
    </div>
  );
}

function ProjectActions({
  project,
  clients,
  localization,
  showDetail,
}: {
  project: ProjectListItem;
  clients: ProjectClientOption[];
  localization: ProjectsClientProps["localization"];
  showDetail: boolean;
}) {
  const t = useTranslations();
  return (
    <div
      className="flex gap-2"
      onClick={(event) => event.stopPropagation()}
      onKeyDown={(event) => event.stopPropagation()}
    >
      {showDetail ? (
        <Button
          size="icon"
          effect="shine"
          asChild
          variant="secondary"
          title={t("projects.actions.detail")}
          aria-label={t("projects.actions.detail")}
        >
          <PendingLink href={`/projects/${project.id}`} className="flex h-full w-full items-center justify-center" showSpinner>
            <Eye className="h-4 w-4" />
          </PendingLink>
        </Button>
      ) : null}
      <ProjectDialog mode="edit" project={project} clients={clients} localization={localization} iconOnly />
      {project.status !== "completed" ? (
        <form action={completeProjectRecord}>
          <input type="hidden" name="id" value={project.id} />
          <PendingSubmitButton
            size="icon"
            variant="secondary"
            title={t("projects.actions.complete")}
            aria-label={t("projects.actions.complete")}
            idleIcon={<CheckCircle2 className="h-4 w-4" />}
          >
          </PendingSubmitButton>
        </form>
      ) : null}
    </div>
  );
}

function ProjectDialog({
  mode,
  project,
  clients,
  localization,
  iconOnly = false,
}: {
  mode: "create" | "edit";
  project?: ProjectListItem;
  clients: ProjectClientOption[];
  localization: ProjectsClientProps["localization"];
  iconOnly?: boolean;
}) {
  const t = useTranslations();
  const [open, setOpen] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [projectType, setProjectType] = useState(project?.type || "client_project");
  const action = mode === "create" ? createProjectRecord : updateProjectRecord;

  async function handleSubmit(formData: FormData) {
    setIsSubmitting(true);

    try {
      await action(formData);
      setOpen(false);
      toast.success(mode === "create" ? t("projects.messages.created") : t("projects.messages.updated"));
    } catch (error) {
      toast.error(
        error instanceof Error
          ? error.message
          : t("projects.errors.saveFailed"),
      );
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button effect="shine"
          variant={mode === "create" ? "default" : "secondary"}
          size={iconOnly ? "icon" : "default"}
          className={iconOnly ? undefined : "min-w-24 gap-2 px-3"}
          title={mode === "create" ? t("projects.actions.add") : t("projects.actions.edit")}
          aria-label={mode === "create" ? t("projects.actions.add") : t("projects.actions.edit")}
        >
          {mode === "create" ? <Plus className="h-4 w-4" /> : <Pencil className="h-4 w-4" />}
          {iconOnly ? null : mode === "create" ? t("projects.actions.add") : t("projects.actions.edit")}
        </Button>
      </DialogTrigger>
      <DialogContent className="flex max-h-[calc(100dvh-2rem)] w-[calc(100vw-2rem)] flex-col overflow-hidden p-0 sm:max-h-[min(680px,calc(100dvh-4rem))] sm:max-w-2xl data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95">
        <form action={handleSubmit} className="flex min-h-0 flex-1 flex-col overflow-hidden">
          {project ? <input type="hidden" name="id" value={project.id} /> : null}
          <DialogHeader className="shrink-0 px-5 pb-4 pt-5 pr-12">
            <DialogTitle>{mode === "create" ? t("projects.form.createTitle") : t("projects.form.editTitle")}</DialogTitle>
            <DialogDescription>
              {t("projects.form.description")}
            </DialogDescription>
          </DialogHeader>

          <div className="tiny-scrollbar min-h-0 flex-1 overflow-y-auto px-5 pb-5">
            <ProjectFormFields
              project={project}
              clients={clients}
              localization={localization}
              projectType={projectType}
              onProjectTypeChange={setProjectType}
            />
          </div>

          <DialogFooter className="shrink-0 border-t border-border bg-background p-5">
            <Button variant="default" effect="shine" type="submit" disabled={isSubmitting} className="w-full gap-2 sm:w-auto">
              {mode === "create" ? <Plus className="h-4 w-4" /> : <Pencil className="h-4 w-4" />}
              {isSubmitting
                ? t("projects.form.submitting")
                : mode === "create"
                  ? t("projects.form.submitCreate")
                  : t("projects.form.submitEdit")}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}

function CoverImageInput({ project }: { project?: ProjectListItem }) {
  const t = useTranslations();
  const inputId = `cover-${project?.id || "new"}`;
  const [previewUrl, setPreviewUrl] = useState(project?.coverImageUrl || "");

  useEffect(() => {
    return () => {
      if (previewUrl.startsWith("blob:")) {
        URL.revokeObjectURL(previewUrl);
      }
    };
  }, [previewUrl]);

  function handleFileChange(event: ChangeEvent<HTMLInputElement>) {
    const file = event.target.files?.[0];

    if (!file) {
      setPreviewUrl(project?.coverImageUrl || "");
      return;
    }

    const nextPreviewUrl = URL.createObjectURL(file);
    setPreviewUrl((currentPreviewUrl) => {
      if (currentPreviewUrl.startsWith("blob:")) {
        URL.revokeObjectURL(currentPreviewUrl);
      }

      return nextPreviewUrl;
    });
  }

  return (
    <div className="grid gap-3">
      <Label htmlFor={inputId}>{t("projects.form.coverImage")}</Label>
      <label
        htmlFor={inputId}
        className="group relative flex aspect-16/7 cursor-pointer items-center justify-center overflow-hidden rounded-sm border border-dashed border-border bg-muted/20 transition-colors hover:border-primary/50 hover:bg-primary/5"
      >
        {previewUrl ? (
          <Image
            src={previewUrl}
            alt={project?.cover_image_alt || project?.name || "Proje kapak görseli önizlemesi"}
            fill
            sizes="(min-width: 640px) 640px, 100vw"
            unoptimized
            className="object-cover"
          />
        ) : (
          <div className="flex flex-col items-center gap-3 text-muted-foreground transition-colors group-hover:text-primary">
            <div className="flex h-12 w-12 items-center justify-center rounded-sm bg-background shadow-sm">
              <ImageIcon className="h-6 w-6" />
            </div>
            <div className="text-center">
              <div className="text-sm font-medium">{t("projects.form.coverImageSelect")}</div>
              <div className="text-xs">{t("projects.form.coverImageFormat")}</div>
            </div>
          </div>
        )}

        {previewUrl ? (
          <div className="absolute inset-x-0 bottom-0 bg-background/90 px-3 py-2 text-xs text-muted-foreground backdrop-blur">
            {t("projects.form.coverImageChange")}
          </div>
        ) : null}
      </label>
      <Input
        id={inputId}
        name="cover_image"
        type="file"
        accept="image/png,image/jpeg,image/webp,image/gif"
        className="sr-only"
        onChange={handleFileChange}
      />
    </div>
  );
}

function ProjectFormFields({
  project,
  clients,
  localization,
  projectType,
  onProjectTypeChange,
}: {
  project?: ProjectListItem;
  clients: ProjectClientOption[];
  localization: ProjectsClientProps["localization"];
  projectType: ProjectListItem["type"];
  onProjectTypeChange: (value: ProjectListItem["type"]) => void;
}) {
  const t = useTranslations();
  return (
    <div className="grid gap-4">
      <CoverImageInput project={project} />

      <LocalizedFields
        idPrefix={`project-${project?.id || "new"}`}
        defaultLocale={localization.defaultLocale}
        locales={localization.locales}
        fields={contentTranslationRegistry.project.map((f: any) => ({ ...f, label: (t as any)(`projects.fields.${f.name}`) || f.label, placeholder: f.placeholder ? (t as any)(`projects.placeholders.${f.name}`) || f.placeholder : undefined }))}
        values={project?.translations}
        fallbackValues={{
          name: project?.name,
          description: project?.description,
          coverImageAlt: project?.cover_image_alt,
        }}
      />

      <div className="grid gap-4 md:grid-cols-2">
        <div className="grid gap-2">
          <Label>{t("projects.form.type")}</Label>
          <Select
            name="type"
            value={projectType}
            onValueChange={(value) => onProjectTypeChange(value as ProjectListItem["type"])}
          >
            <SelectTrigger>
              <SelectValue placeholder={t("projects.form.typePlaceholder")} />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="client_project">{t("projects.types.client")}</SelectItem>
              <SelectItem value="side_project">{t("projects.types.side")}</SelectItem>
            </SelectContent>
          </Select>
        </div>
        <div className="grid gap-2">
          <Label>{t("projects.form.client")}</Label>
          <Select
            name="client_id"
            defaultValue={project?.client_id || ""}
            disabled={projectType === "side_project"}
          >
            <SelectTrigger>
              <SelectValue placeholder={t("projects.form.clientPlaceholder")} />
            </SelectTrigger>
            <SelectContent>
              {clients.map((client) => (
                <SelectItem key={client.id} value={client.id}>
                  {client.name}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      </div>

      <div className="grid gap-4 md:grid-cols-3">
        <div className="grid gap-2">
          <Label>{t("projects.form.status")}</Label>
          <Select name="status" defaultValue={project?.status || "planning"}>
            <SelectTrigger>
              <SelectValue placeholder={t("projects.form.statusPlaceholder")} />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="planning">{t("projects.status.planning")}</SelectItem>
              <SelectItem value="active">{t("projects.status.active")}</SelectItem>
              <SelectItem value="paused">{t("projects.status.paused")}</SelectItem>
              <SelectItem value="completed">{t("projects.status.completed")}</SelectItem>
              <SelectItem value="cancelled">{t("projects.status.cancelled")}</SelectItem>
            </SelectContent>
          </Select>
        </div>
        <div className="grid gap-2">
          <Label htmlFor={`start-${project?.id || "new"}`}>{t("projects.form.startDate")}</Label>
          <Input id={`start-${project?.id || "new"}`} name="start_date" type="date" defaultValue={project?.start_date || ""} />
        </div>
        <div className="grid gap-2">
          <Label htmlFor={`due-${project?.id || "new"}`}>{t("projects.form.dueDate")}</Label>
          <Input id={`due-${project?.id || "new"}`} name="due_date" type="date" defaultValue={project?.due_date || ""} />
        </div>
      </div>

      <div className="grid gap-4 md:grid-cols-3">
        <div className="grid gap-2">
          <Label htmlFor={`budget-${project?.id || "new"}`}>{t("projects.form.budget")}</Label>
          <Input
            id={`budget-${project?.id || "new"}`}
            name="budget_amount"
            type="number"
            min="0"
            step="0.01"
            defaultValue={project?.budget_amount ?? ""}
            placeholder="0"
          />
        </div>
        <div className="grid gap-2">
          <Label htmlFor={`currency-${project?.id || "new"}`}>{t("projects.form.currency")}</Label>
          <Input id={`currency-${project?.id || "new"}`} name="currency" defaultValue={project?.currency || "USD"} maxLength={3} />
        </div>
        <div className="grid gap-2">
          <Label htmlFor={`progress-${project?.id || "new"}`}>{t("projects.form.progress")}</Label>
          <div className="flex items-center gap-3">
            <Input
              id={`progress-${project?.id || "new"}`}
              name="progress"
              type="range"
              min="0"
              max="100"
              defaultValue={project?.progress ?? 0}
              className="flex-1 cursor-pointer accent-primary"
              onChange={(e) => {
                const el = document.getElementById(`progress-val-${project?.id || "new"}`);
                if (el) el.textContent = `%${e.target.value}`;
              }}
            />
            <span id={`progress-val-${project?.id || "new"}`} className="w-10 text-sm font-medium text-right">
              %{project?.progress ?? 0}
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}

function ProgressBar({ progress, compact = false }: { progress: number; compact?: boolean }) {
  const t = useTranslations();
  return (
    <div className="space-y-2">
      {!compact ? (
        <div className="flex justify-between text-xs text-muted-foreground">
          <span>{t("projects.card.progress")}</span>
          <span>{progress}%</span>
        </div>
      ) : null}
      <div className={compact ? "h-2 rounded-full bg-muted" : "h-2.5 rounded-full bg-muted"}>
        <div
          className="h-full rounded-full bg-primary transition-all"
          style={{ width: `${Math.min(Math.max(progress, 0), 100)}%` }}
        />
      </div>
    </div>
  );
}

function EmptyState({ hasQuery }: { hasQuery: boolean }) {
  const t = useTranslations();
  return (
    <div className="flex flex-col items-center justify-center gap-2 rounded-sm border border-dashed border-border py-12 text-center">
      <FolderKanban className="h-8 w-8 text-muted-foreground/50" />
      <div className="text-sm font-medium text-foreground">{t("projects.empty.title")}</div>
      <div className="max-w-xs text-xs text-muted-foreground">
        {t("projects.empty.description")}
      </div>
    </div>
  );
}

function formatDate(value: string) {
  return new Intl.DateTimeFormat(getDocumentIntlLocale(), {
    day: "2-digit",
    month: "short",
    year: "numeric",
  }).format(new Date(`${value}T00:00:00`));
}

function formatCurrency(value: number) {
  return new Intl.NumberFormat(getDocumentIntlLocale(), {
    style: "currency",
    currency: "USD",
    maximumFractionDigits: 0,
  }).format(value);
}

function AIProjectRiskDialog({ projectId }: { projectId?: string }) {
  const t = useTranslations();
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState<string | null>(null);

  const handleAnalyze = async () => {
    setLoading(true);
    setResult(null);
    try {
      const res = await fetch("/api/project-risk", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ projectId }),
      });
      const data = await res.json();
      if (!res.ok) {
        throw new Error(data.error || "Bilinmeyen bir hata oluştu.");
      }
      setResult(data.text);
    } catch (err) {
      setResult(
        "Hata: " +
          (err instanceof Error ? err.message : "Bilinmeyen bir hata oluştu."),
      );
    } finally {
      setLoading(false);
    }
  };

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button effect="shine" variant="secondary" className="gap-2">
          <Brain className="h-4 w-4" />{t("projects.actions.ai")}</Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-2xl max-h-[80vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <Brain className="h-5 w-5 text-indigo-600" />
            Proje Risk Analizi
          </DialogTitle>
          <DialogDescription>
            Yapay zeka, projelerinizin ilerleme durumunu ve bitiş tarihlerini kontrol ederek riskleri tahmin eder.
          </DialogDescription>
        </DialogHeader>

        <div className="py-4">
          {!result && !loading && (
            <div className="text-center py-10">
              <Button variant="default" effect="shine" onClick={handleAnalyze} className="gap-2">
                <Brain className="h-4 w-4" />
                Raporu Oluştur
              </Button>
            </div>
          )}

          {loading && (
            <div className="flex flex-col items-center justify-center py-10 space-y-4 text-indigo-600">
              <Loader2 className="h-8 w-8 animate-spin" />
              <p className="text-sm font-medium">Projeler analiz ediliyor...</p>
            </div>
          )}

          {result && (
            <div className="bg-muted/50 border border-border rounded-lg p-5 text-sm prose prose-sm dark:prose-invert max-w-none whitespace-pre-wrap">
              {result}
            </div>
          )}
        </div>

        {result && (
          <DialogFooter>
            <Button effect="shine" variant="secondary" onClick={() => setOpen(false)}>Kapat</Button>
            <Button effect="shine" variant="default" onClick={handleAnalyze} className="gap-2">
              <Brain className="h-4 w-4" />
              Yeniden Oluştur
            </Button>
          </DialogFooter>
        )}
      </DialogContent>
    </Dialog>
  );
}