"use client";
import { useState } from "react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { Plus, FolderOpen } from "lucide-react";
import { projectsApi } from "@/lib/api";
import { Project, PROJECT_STATUS_LABELS } from "@/types";
import { PageHeader, Modal, ProgressBar, StatusBadge, EmptyState, Spinner, ConfirmDialog } from "@/components/ui";
import { formatDate, progressColor } from "@/lib/utils";
import { useForm } from "react-hook-form";
import toast from "react-hot-toast";

function ProjectForm({ project, onClose }: { project?: Project; onClose: () => void }) {
  const qc = useQueryClient();
  const { register, handleSubmit } = useForm({
    defaultValues: project ? { name: project.name, description: project.description || "", status: project.status, end_date: project.end_date || "", color: project.color } : { status: "aktif", color: "#3b82f6" },
  });
  const mutation = useMutation({
    mutationFn: (data: Record<string, unknown>) => project ? projectsApi.update(project.id, data) : projectsApi.create(data),
    onSuccess: () => { qc.invalidateQueries({ queryKey: ["projects"] }); toast.success(project ? "Proje güncellendi." : "Proje oluşturuldu."); onClose(); },
    onError: () => toast.error("Bir hata oluştu."),
  });
  return (
    <form onSubmit={handleSubmit((d) => mutation.mutate(d))} className="space-y-4">
      <div><label className="form-label">Proje Adı *</label><input {...register("name", { required: true })} className="kaplan-input" placeholder="Proje adı" /></div>
      <div><label className="form-label">Açıklama</label><textarea {...register("description")} rows={3} className="kaplan-textarea" /></div>
      <div className="grid grid-cols-2 gap-3">
        <div><label className="form-label">Durum</label><select {...register("status")} className="kaplan-select">{Object.entries(PROJECT_STATUS_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}</select></div>
        <div><label className="form-label">Bitiş Tarihi</label><input {...register("end_date")} type="date" className="kaplan-input" /></div>
      </div>
      <div><label className="form-label">Renk</label><input {...register("color")} type="color" className="kaplan-input h-10 cursor-pointer" /></div>
      <div className="flex gap-3 justify-end pt-2"><button type="button" onClick={onClose} className="btn-secondary">İptal</button><button type="submit" disabled={mutation.isPending} className="btn-primary">{mutation.isPending && <Spinner size={14} />}{project ? "Güncelle" : "Oluştur"}</button></div>
    </form>
  );
}

export default function ProjelerPage() {
  const qc = useQueryClient();
  const [modal, setModal] = useState<{ open: boolean; project?: Project }>({ open: false });
  const [deleteModal, setDeleteModal] = useState<{ open: boolean; projectId?: number }>({ open: false });
  const { data: projects = [], isLoading } = useQuery<Project[]>({ queryKey: ["projects"], queryFn: () => projectsApi.list() });
  const deleteMutation = useMutation({ mutationFn: (id: number) => projectsApi.delete(id), onSuccess: () => { qc.invalidateQueries({ queryKey: ["projects"] }); toast.success("Proje silindi."); setDeleteModal({ open: false }); } });

  return (
    <div className="space-y-5 animate-fade-in">
      <PageHeader title="Proje Yönetimi" subtitle={`${projects.length} proje`} action={<button onClick={() => setModal({ open: true })} className="btn-primary"><Plus size={16} /> Yeni Proje</button>} />
      {isLoading ? <div className="flex justify-center py-12"><Spinner /></div> : projects.length === 0 ? <EmptyState icon="🚀" title="Henüz proje yok" description="İlk projenizi oluşturun." action={<button onClick={() => setModal({ open: true })} className="btn-primary"><Plus size={14} /> Proje Ekle</button>} /> : (
        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
          {projects.map((project) => (
            <div key={project.id} className="kaplan-card space-y-4">
              <div className="flex items-start justify-between">
                <div className="flex items-center gap-3">
                  <div className="w-3 h-3 rounded-full flex-shrink-0" style={{ background: project.color }} />
                  <h3 className="font-semibold text-surface-100">{project.name}</h3>
                </div>
                <StatusBadge status={project.status} />
              </div>
              {project.description && <p className="text-sm text-surface-500 line-clamp-2">{project.description}</p>}
              <div className="space-y-1.5">
                <div className="flex justify-between text-xs text-surface-400">
                  <span>İlerleme</span><span className="font-medium text-surface-300">{project.progress_pct}%</span>
                </div>
                <ProgressBar value={project.progress_pct} />
              </div>
              <div className="flex items-center justify-between text-xs text-surface-500">
                <span>{project.task_count} görev</span>
                {project.end_date && <span>📅 {formatDate(project.end_date)}</span>}
              </div>
              <div className="flex gap-2 pt-1">
                <button onClick={() => setModal({ open: true, project })} className="btn-ghost text-xs flex-1 justify-center">Düzenle</button>
                <button onClick={() => setDeleteModal({ open: true, projectId: project.id })} className="btn-ghost text-xs text-red-400 px-2">Sil</button>
              </div>
            </div>
          ))}
        </div>
      )}
      <Modal open={modal.open} onClose={() => setModal({ open: false })} title={modal.project ? "Projeyi Düzenle" : "Yeni Proje"}><ProjectForm project={modal.project} onClose={() => setModal({ open: false })} /></Modal>
      <ConfirmDialog open={deleteModal.open} onClose={() => setDeleteModal({ open: false })} onConfirm={() => deleteModal.projectId && deleteMutation.mutate(deleteModal.projectId)} title="Projeyi Sil" description="Bu projeyi ve tüm görevleri silmek istiyor musunuz?" loading={deleteMutation.isPending} />
    </div>
  );
}