import Link from "next/link";
import { BadgeCheck, MailWarning } from "lucide-react";
import { getWorkspace } from "@/lib/session";
import { formatDate, titleCase } from "@/lib/format";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Alert } from "@/components/ui/alert";
import { ThemeToggle } from "@/components/ui/theme";
import { ResendVerificationButton } from "@/components/dashboard/resend-verification";
import { ProfileNameForm } from "@/components/dashboard/settings/profile-form";
import { ChangeEmailDialog } from "@/components/dashboard/settings/change-email-dialog";
import { OrganizationForm } from "@/components/dashboard/settings/organization-form";
import { DeleteAccountDialog } from "@/components/dashboard/settings/delete-account-dialog";

export const dynamic = "force-dynamic";

export default async function SettingsProfilePage({ searchParams }: { searchParams: Promise<{ "email-changed"?: string }> }) {
  const sp = await searchParams;
  const ws = await getWorkspace();
  const canEditOrg = ["owner", "admin", "billing"].includes(ws.role);

  return (
    <div className="grid gap-6">
      {sp["email-changed"] === "1" ? <Alert variant="success" title="Email address updated">Your new address is now your login. If it is not verified yet, use the button below.</Alert> : null}

      <Card>
        <CardHeader>
          <CardTitle>Profile</CardTitle>
          <CardDescription>How you appear across Fetcha. Member since {formatDate(ws.user.createdAt, { timeStyle: undefined })}.</CardDescription>
        </CardHeader>
        <CardContent className="grid gap-6">
          <ProfileNameForm name={ws.user.name} />
          <div className="grid gap-2 border-t border-border pt-5">
            <div className="text-[13px] font-medium">Email</div>
            <div className="flex flex-wrap items-center gap-3">
              <span className="font-mono text-[13.5px]">{ws.user.email}</span>
              {ws.user.emailVerified ? (
                <Badge variant="success">
                  <BadgeCheck className="size-3" /> Verified
                </Badge>
              ) : (
                <Badge variant="warning">
                  <MailWarning className="size-3" /> Unverified
                </Badge>
              )}
              <div className="ml-auto flex items-center gap-2">
                {!ws.user.emailVerified ? <ResendVerificationButton email={ws.user.email} size="sm" /> : null}
                <ChangeEmailDialog currentEmail={ws.user.email} />
              </div>
            </div>
            <p className="text-xs text-fg-subtle">{ws.user.emailVerified ? "Security notices and receipts go to this address." : "Verify your address to unlock production API access."}</p>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <div className="flex items-center justify-between gap-3">
            <CardTitle>Organization</CardTitle>
            <div className="flex items-center gap-2">
              <Badge variant="outline">{titleCase(ws.role)}</Badge>
              <Badge variant="accent">{titleCase(ws.organization.plan)} plan</Badge>
            </div>
          </div>
          <CardDescription>
            Organization-wide spending limits apply on top of per-project limits. Manage your plan in{" "}
            <Link href="/dashboard/billing" className="text-fg underline-offset-4 hover:underline">
              Billing
            </Link>
            . Teams and invitations are not available yet.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <OrganizationForm name={ws.organization.name} softLimitUsd={ws.organization.softLimitUsd} hardLimitUsd={ws.organization.hardLimitUsd} canEdit={canEditOrg} />
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Appearance</CardTitle>
          <CardDescription>Theme preference is stored in this browser.</CardDescription>
        </CardHeader>
        <CardContent className="flex items-center justify-between gap-4">
          <p className="text-[13px] text-fg-muted">Light, dark, or follow your system.</p>
          <ThemeToggle className="border border-border" />
        </CardContent>
      </Card>

      <Card className="border-danger/30">
        <CardHeader>
          <CardTitle className="text-danger">Danger zone</CardTitle>
          <CardDescription>Deleting your account removes your organization, projects, keys and request history. Requires your password and an email confirmation.</CardDescription>
        </CardHeader>
        <CardContent>
          <DeleteAccountDialog email={ws.user.email} />
        </CardContent>
      </Card>
    </div>
  );
}