import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Edit, Globe, Plus, Save, Trash2 } from "lucide-react";
import { useState } from "react";
import { useParams } from "react-router-dom";
import { Button } from "../../../components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "../../../components/ui/card";
import { Input } from "../../../components/ui/input";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "../../../components/ui/table";
import {
  createIdpConfigForClient,
  listIdpConfigsForClient,
} from "../../../lib/devApi";
import type { IdpConfig, IdpConfigCreateRequest } from "../../../lib/devApi";
import { t } from "../../../lib/i18n";

// Proper Modal Component with Form
const CreateIdpModal = ({
  isOpen,
  onClose,
  clientId,
}: {
  isOpen: boolean;
  onClose: () => void;
  clientId: string;
}) => {
  const queryClient = useQueryClient();
  const [formData, setFormData] = useState<IdpConfigCreateRequest>({
    client_id: clientId,
    provider_type: "oidc",
    display_name: "",
    status: "active",
    issuer_url: "",
    oidc_client_id: "",
    oidc_client_secret: "",
    scopes: "openid email profile",
  });

  const mutation = useMutation({
    mutationFn: (newData: IdpConfigCreateRequest) =>
      createIdpConfigForClient(newData),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["idpConfigs", clientId] });
      onClose();
    },
    onError: (error) => {
      alert(`Failed to create configuration: ${error.message}`);
    },
  });

  const handleChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>,
  ) => {
    const { name, value } = e.target;
    setFormData((prev) => ({
      ...prev,
      [name]: value,
    }));
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    mutation.mutate(formData);
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 backdrop-blur-sm">
      <Card className="w-full max-w-lg shadow-2xl animate-in zoom-in-95 duration-200">
        <CardHeader>
          <CardTitle>
            {t("ui.dev.clients.federation.add_title", "Add Identity Provider")}
          </CardTitle>
          <CardDescription>
            {t(
              "msg.dev.clients.federation.add_subtitle",
              "Connect an external OIDC provider.",
            )}
          </CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="space-y-2">
              <label className="text-sm font-semibold">Display Name</label>
              <Input
                name="display_name"
                value={formData.display_name}
                onChange={handleChange}
                placeholder="e.g. Google Workspace"
                required
              />
            </div>

            <div className="space-y-2">
              <label className="text-sm font-semibold">Issuer URL</label>
              <Input
                type="url"
                name="issuer_url"
                value={formData.issuer_url}
                onChange={handleChange}
                placeholder="https://accounts.google.com"
                required
              />
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <label className="text-sm font-semibold">Client ID</label>
                <Input
                  name="oidc_client_id"
                  value={formData.oidc_client_id}
                  onChange={handleChange}
                  required
                />
              </div>
              <div className="space-y-2">
                <label className="text-sm font-semibold">Client Secret</label>
                <Input
                  type="password"
                  name="oidc_client_secret"
                  value={formData.oidc_client_secret}
                  onChange={handleChange}
                  required
                />
              </div>
            </div>

            <div className="space-y-2">
              <label className="text-sm font-semibold">Scopes</label>
              <Input
                name="scopes"
                value={formData.scopes}
                onChange={handleChange}
              />
            </div>

            <div className="flex flex-col-reverse sm:flex-row sm:justify-end gap-2 pt-4">
              <Button type="button" variant="outline" onClick={onClose}>
                {t("ui.common.cancel", "Cancel")}
              </Button>
              <Button
                type="submit"
                disabled={
                  mutation.isPending ||
                  formData.display_name.trim() === "" ||
                  (formData.issuer_url?.trim() ?? "") === ""
                }
              >
                {mutation.isPending ? (
                  <div className="h-4 w-4 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2" />
                ) : (
                  <Save size={16} className="mr-2" />
                )}
                {mutation.isPending
                  ? t("msg.common.saving", "Saving...")
                  : t("ui.common.save", "Save Configuration")}
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  );
};

export function ClientFederationPage() {
  const { id: clientId } = useParams<{ id: string }>();
  const [isCreateModalOpen, setCreateModalOpen] = useState(false);

  if (!clientId) {
    return (
      <div className="p-8 text-center text-destructive">
        Client ID is missing
      </div>
    );
  }

  const { data, isLoading, error } = useQuery({
    queryKey: ["idpConfigs", clientId],
    queryFn: () => listIdpConfigsForClient(clientId),
  });

  return (
    <div className="space-y-6 p-1">
      <header className="flex flex-wrap items-center justify-between gap-4">
        <div>
          <h1 className="text-2xl font-bold flex items-center gap-2">
            <Globe className="h-6 w-6 text-primary" />
            {t("ui.dev.clients.federation.title", "Identity Federation")}
          </h1>
          <p className="text-muted-foreground">
            {t(
              "msg.dev.clients.federation.subtitle",
              "Manage external identity providers for this application.",
            )}
          </p>
        </div>
        <Button onClick={() => setCreateModalOpen(true)} className="gap-2">
          <Plus className="h-4 w-4" />
          {t("ui.dev.clients.federation.add_btn", "Add Provider")}
        </Button>
      </header>

      <Card className="glass-panel">
        <CardContent className="p-0">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Display Name</TableHead>
                <TableHead>Provider Type</TableHead>
                <TableHead>Status</TableHead>
                <TableHead className="text-right">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {isLoading ? (
                <TableRow>
                  <TableCell colSpan={4} className="h-24 text-center">
                    {t("msg.common.loading", "Loading...")}
                  </TableCell>
                </TableRow>
              ) : error ? (
                <TableRow>
                  <TableCell
                    colSpan={4}
                    className="h-24 text-center text-destructive"
                  >
                    {(error as Error).message}
                  </TableCell>
                </TableRow>
              ) : data?.length === 0 ? (
                <TableRow>
                  <TableCell
                    colSpan={4}
                    className="h-24 text-center text-muted-foreground"
                  >
                    {t(
                      "msg.dev.clients.federation.empty",
                      "No IdP configurations found.",
                    )}
                  </TableCell>
                </TableRow>
              ) : (
                data?.map((config: IdpConfig) => (
                  <tr
                    key={config.id}
                    className="border-b transition-colors hover:bg-muted/50"
                  >
                    <TableCell className="font-medium">
                      {config.display_name}
                    </TableCell>
                    <TableCell>{config.provider_type.toUpperCase()}</TableCell>
                    <TableCell>
                      <span
                        className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold ${
                          config.status === "active"
                            ? "bg-emerald-500/10 text-emerald-500"
                            : "bg-muted text-muted-foreground"
                        }`}
                      >
                        {config.status}
                      </span>
                    </TableCell>
                    <TableCell className="text-right">
                      <div className="flex justify-end gap-2">
                        <Button variant="ghost" size="icon" className="h-8 w-8">
                          <Edit className="h-4 w-4" />
                        </Button>
                        <Button
                          variant="ghost"
                          size="icon"
                          className="h-8 w-8 text-destructive"
                        >
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </TableCell>
                  </tr>
                ))
              )}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

      <CreateIdpModal
        isOpen={isCreateModalOpen}
        onClose={() => setCreateModalOpen(false)}
        clientId={clientId}
      />
    </div>
  );
}