"use client";

import { FormEvent, useEffect, useState } from "react";
import { PageHeader } from "@/components/layout/PageHeader";
import { ErrorState } from "@/components/layout/ErrorState";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { StatusBadge } from "@/components/ui/status-badge";
import { apiFetch } from "@/lib/api";
import { formatRole } from "@/lib/roles";
import {
  formatTenantStatus,
  tenantStatusBadgeVariant,
  tenantStatusIndicator,
} from "@/lib/status";

type Tenant = {
  id: string;
  name: string;
  companyName?: string | null;
  billingEmail?: string | null;
  slug: string;
  status: string;
};

type Me = {
  user: { email: string; firstName?: string | null; lastName?: string | null; role: string };
};

export default function AccountPage() {
  const [tenant, setTenant] = useState<Tenant | null>(null);
  const [me, setMe] = useState<Me | null>(null);
  const [message, setMessage] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    Promise.all([apiFetch<Tenant>("/tenants/me"), apiFetch<Me>("/auth/me")])
      .then(([t, profile]) => {
        setTenant(t);
        setMe(profile);
      })
      .catch((err) => setError(err instanceof Error ? err.message : "Failed"))
      .finally(() => setLoading(false));
  }, []);

  async function onSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setMessage(null);
    setError(null);
    setSaving(true);
    const form = new FormData(event.currentTarget);
    try {
      const updated = await apiFetch<Tenant>("/tenants/me", {
        method: "PATCH",
        body: JSON.stringify({
          name: String(form.get("name")),
          companyName: String(form.get("companyName")),
          billingEmail: String(form.get("billingEmail")),
        }),
      });
      setTenant(updated);
      setMessage("Company profile saved.");
    } catch (err) {
      setError(err instanceof Error ? err.message : "Update failed");
    } finally {
      setSaving(false);
    }
  }

  return (
    <>
      <PageHeader
        title="Company / Account"
        description="Manage company details for your tenant. Team management is not part of this MVP."
      />

      {error ? <ErrorState message={error} /> : null}
      {message ? (
        <Alert className="mb-4">
          <AlertDescription>{message}</AlertDescription>
        </Alert>
      ) : null}

      {loading ? (
        <Skeleton className="h-64 w-full max-w-xl" />
      ) : tenant ? (
        <div className="grid max-w-3xl gap-4 lg:grid-cols-5">
          <Card className="lg:col-span-3">
            <CardHeader>
              <CardTitle>Company</CardTitle>
              <CardDescription className="flex flex-wrap items-center gap-2">
                <span>Slug: {tenant.slug}</span>
                <StatusBadge
                  variant={tenantStatusBadgeVariant(tenant.status)}
                  indicator={tenantStatusIndicator(tenant.status)}
                >
                  {formatTenantStatus(tenant.status)}
                </StatusBadge>
              </CardDescription>
            </CardHeader>
            <CardContent>
              <form className="space-y-4" onSubmit={onSubmit}>
                <div className="space-y-2">
                  <Label htmlFor="name">Display name</Label>
                  <Input id="name" name="name" defaultValue={tenant.name} required />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="companyName">Company</Label>
                  <Input id="companyName" name="companyName" defaultValue={tenant.companyName || ""} />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="billingEmail">Billing email</Label>
                  <Input
                    id="billingEmail"
                    name="billingEmail"
                    type="email"
                    defaultValue={tenant.billingEmail || ""}
                  />
                </div>
                <Button type="submit" disabled={saving}>
                  {saving ? "Saving…" : "Save changes"}
                </Button>
              </form>
            </CardContent>
          </Card>
          <Card className="lg:col-span-2">
            <CardHeader>
              <CardTitle>Primary admin</CardTitle>
              <CardDescription>Signed-in account</CardDescription>
            </CardHeader>
            <CardContent className="space-y-2 text-sm">
              <p className="font-medium">{me?.user.email}</p>
              <p className="text-muted-foreground">
                {[me?.user.firstName, me?.user.lastName].filter(Boolean).join(" ") || "—"}
              </p>
              <p className="text-muted-foreground">Role: {formatRole(me?.user.role)}</p>
            </CardContent>
          </Card>
        </div>
      ) : null}
    </>
  );
}