import { useState, useEffect, useMemo } from "react";
import { useNavigate, Link } from "react-router-dom";
import { useAlert } from "../context/AlertContext";
import { useAuth } from "../context/AuthContext";
import { motion } from "framer-motion";
import FormField from "../components/FormField";
import Forbidden from "../components/Forbidden";
import AdminDatePicker from "../components/AdminDatePicker";
import apiFetch from "../utils/api";

const API_BASE = "/api/admin";

interface Customer {
  id: number;
  name: string;
  company_id?: string;
  city?: string;
}

interface User {
  id: number;
  name: string;
}

interface ProjectForm {
  project_number: string;
  name: string;
  customer_id: number | null;
  customer_name: string;
  start_date: string;
  responsible_user_id: string;
}

export default function ProjectCreate() {
  const navigate = useNavigate();
  const alert = useAlert();
  const { hasPermission } = useAuth();

  const [form, setForm] = useState<ProjectForm>({
    project_number: "",
    name: "",
    customer_id: null,
    customer_name: "",
    start_date: new Date().toISOString().split("T")[0],
    responsible_user_id: "",
  });
  const [users, setUsers] = useState<User[]>([]);
  const [saving, setSaving] = useState(false);
  const [errors, setErrors] = useState<Record<string, string | undefined>>({});
  const [loadingNumber, setLoadingNumber] = useState(true);

  // Customer selector state
  const [customers, setCustomers] = useState<Customer[]>([]);
  const [customerSearch, setCustomerSearch] = useState("");
  const [showCustomerDropdown, setShowCustomerDropdown] = useState(false);

  // Load initial data
  useEffect(() => {
    const load = async () => {
      try {
        const [numRes, custRes, usersRes] = await Promise.all([
          apiFetch(`${API_BASE}/projects/next-number`),
          apiFetch(`${API_BASE}/customers`),
          apiFetch(`${API_BASE}/users`),
        ]);

        const numData = await numRes.json();
        if (numData.success) {
          setForm((prev) => ({
            ...prev,
            project_number:
              numData.data?.next_number || numData.data?.number || "",
          }));
        }

        const custData = await custRes.json();
        if (custData.success) {
          setCustomers(
            Array.isArray(custData.data)
              ? custData.data
              : custData.data?.items || [],
          );
        }

        const usersData = await usersRes.json();
        if (usersData.success) {
          const rawUsers = Array.isArray(usersData.data)
            ? usersData.data
            : usersData.data?.items || [];
          setUsers(
            rawUsers.map((u: any) => ({
              id: u.id,
              name:
                `${u.first_name || ""} ${u.last_name || ""}`.trim() ||
                u.username,
            })),
          );
        }
      } catch {
        alert.error("Chyba při načítání dat");
      } finally {
        setLoadingNumber(false);
      }
    };
    load();
  }, [alert]);

  // Customer filtering
  const filteredCustomers = useMemo(() => {
    if (!customerSearch) return customers;
    const q = customerSearch.toLowerCase();
    return customers.filter(
      (c) =>
        (c.name || "").toLowerCase().includes(q) ||
        (c.company_id || "").includes(customerSearch) ||
        (c.city || "").toLowerCase().includes(q),
    );
  }, [customers, customerSearch]);

  // Close dropdown on outside click
  useEffect(() => {
    const handleClickOutside = () => setShowCustomerDropdown(false);
    if (showCustomerDropdown) {
      document.addEventListener("click", handleClickOutside);
      return () => document.removeEventListener("click", handleClickOutside);
    }
  }, [showCustomerDropdown]);

  if (!hasPermission("projects.create")) return <Forbidden />;

  const selectCustomer = (customer: Customer) => {
    setForm((prev) => ({
      ...prev,
      customer_id: customer.id,
      customer_name: customer.name,
    }));
    setErrors((prev) => ({ ...prev, customer_id: undefined }));
    setCustomerSearch("");
    setShowCustomerDropdown(false);
  };

  const clearCustomer = () => {
    setForm((prev) => ({ ...prev, customer_id: null, customer_name: "" }));
  };

  const updateForm = (field: keyof ProjectForm, value: unknown) => {
    setForm((prev) => ({ ...prev, [field]: value }));
    setErrors((prev) => ({ ...prev, [field]: undefined }));
  };

  const handleSave = async () => {
    const newErrors: Record<string, string> = {};
    if (!form.name.trim()) newErrors.name = "Název projektu je povinný";
    if (!form.customer_id) newErrors.customer_id = "Vyberte zákazníka";
    setErrors(newErrors);
    if (Object.keys(newErrors).length > 0) return;

    setSaving(true);
    try {
      const body = {
        name: form.name.trim(),
        customer_id: form.customer_id,
        start_date: form.start_date,
        responsible_user_id: form.responsible_user_id || null,
      };

      const res = await apiFetch(`${API_BASE}/projects`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body),
      });
      const data = await res.json();
      if (data.success) {
        alert.success("Projekt byl vytvořen");
        navigate(`/projects/${data.data.id}`);
      } else {
        alert.error(data.error || "Nepodařilo se vytvořit projekt");
      }
    } catch {
      alert.error("Chyba připojení");
    } finally {
      setSaving(false);
    }
  };

  if (loadingNumber) {
    return (
      <div className="admin-skeleton" style={{ padding: 0, gap: "1.5rem" }}>
        <div
          className="admin-skeleton-row"
          style={{ justifyContent: "space-between" }}
        >
          <div className="admin-skeleton-line h-8" style={{ width: "200px" }} />
        </div>
        <div className="admin-card">
          <div className="admin-skeleton" style={{ gap: "1.25rem" }}>
            {[0, 1, 2, 3].map((i) => (
              <div key={i} className="admin-skeleton-row">
                <div className="admin-skeleton-line w-1/4" />
                <div className="admin-skeleton-line w-1/2" />
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }

  return (
    <div>
      <motion.div
        className="admin-page-header"
        initial={{ opacity: 0, y: 12 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.25 }}
      >
        <div className="flex-row gap-4">
          <Link
            to="/projects"
            className="admin-btn-icon"
            title="Zpět"
            aria-label="Zpět"
          >
            <svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
            >
              <path d="M19 12H5M12 19l-7-7 7-7" />
            </svg>
          </Link>
          <div>
            <h1 className="admin-page-title">Nový projekt</h1>
            <p className="admin-page-subtitle">Ruční vytvoření projektu</p>
          </div>
        </div>
        <div className="admin-page-actions">
          <button
            onClick={handleSave}
            disabled={saving}
            className="admin-btn admin-btn-primary"
          >
            {saving ? "Ukládám..." : "Uložit"}
          </button>
        </div>
      </motion.div>

      <motion.div
        className="admin-card"
        initial={{ opacity: 0, y: 12 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.25, delay: 0.06 }}
        style={{ overflow: "visible" }}
      >
        <div className="admin-card-body">
          <h3 className="admin-card-title">Základní údaje</h3>
          <div className="admin-form">
            <div className="admin-form-row">
              <FormField label="Číslo projektu">
                <input
                  type="text"
                  value={form.project_number}
                  readOnly
                  className="admin-form-input"
                  style={{
                    backgroundColor: "var(--bg-secondary)",
                    cursor: "default",
                  }}
                />
              </FormField>
              <FormField label="Název" error={errors.name} required>
                <input
                  type="text"
                  value={form.name}
                  onChange={(e) => updateForm("name", e.target.value)}
                  className="admin-form-input"
                  placeholder="Název projektu"
                />
              </FormField>
            </div>

            <div className="admin-form-row">
              <FormField label="Zákazník" error={errors.customer_id} required>
                {form.customer_id ? (
                  <div className="admin-customer-selected">
                    <span>{form.customer_name}</span>
                    <button
                      type="button"
                      onClick={clearCustomer}
                      className="admin-btn-icon"
                      title="Odebrat zákazníka"
                      aria-label="Odebrat zákazníka"
                    >
                      <svg
                        width="14"
                        height="14"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                      >
                        <line x1="18" y1="6" x2="6" y2="18" />
                        <line x1="6" y1="6" x2="18" y2="18" />
                      </svg>
                    </button>
                  </div>
                ) : (
                  <div
                    className="admin-customer-select"
                    onClick={(e) => e.stopPropagation()}
                  >
                    <input
                      type="text"
                      value={customerSearch}
                      onChange={(e) => {
                        setCustomerSearch(e.target.value);
                        setShowCustomerDropdown(true);
                      }}
                      onFocus={() => setShowCustomerDropdown(true)}
                      className="admin-form-input"
                      placeholder="Hledat zákazníka..."
                    />
                    {showCustomerDropdown && (
                      <div className="admin-customer-dropdown">
                        {filteredCustomers.length === 0 ? (
                          <div className="admin-customer-dropdown-empty">
                            Žádní zákazníci
                          </div>
                        ) : (
                          filteredCustomers.slice(0, 20).map((c) => (
                            <div
                              key={c.id}
                              className="admin-customer-dropdown-item"
                              onMouseDown={() => selectCustomer(c)}
                            >
                              <div>{c.name}</div>
                              {c.city && <div>{c.city}</div>}
                            </div>
                          ))
                        )}
                      </div>
                    )}
                  </div>
                )}
              </FormField>
              <FormField label="Datum zahájení">
                <AdminDatePicker
                  mode="date"
                  value={form.start_date}
                  onChange={(val: string) => updateForm("start_date", val)}
                />
              </FormField>
            </div>

            <div className="admin-form-row">
              <FormField label="Zodpovědná osoba">
                <select
                  value={form.responsible_user_id}
                  onChange={(e) =>
                    updateForm("responsible_user_id", e.target.value)
                  }
                  className="admin-form-select"
                >
                  <option value="">— Nevybráno —</option>
                  {users.map((u) => (
                    <option key={u.id} value={u.id}>
                      {u.name}
                    </option>
                  ))}
                </select>
              </FormField>
            </div>
          </div>
        </div>
      </motion.div>
    </div>
  );
}