import { useEffect, useState } from "react";
import { Plus, Trash2 } from "lucide-react";
import { useNavigate } from "react-router-dom";

import { Button } from "./components/ui/button";
import { Input } from "./components/ui/input";
import Logo from "./Logo";
import usePluginSettings from "./utils/settings";

export default function CustomHeadersPage() {
  const navigate = useNavigate();
  const { settings, setSettings } = usePluginSettings();

  // Convert headers object to array of entries for easier manipulation
  const [headers, setHeaders] = useState<{ key: string; value: string }[]>([]);
  const [newHeaderKey, setNewHeaderKey] = useState("");
  const [newHeaderValue, setNewHeaderValue] = useState("");

  // Update headers when settings change (e.g., when loaded from storage)
  useEffect(() => {
    setHeaders(
      Object.entries(settings.customHeaders || {}).map(([key, value]) => ({
        key,
        value,
      })),
    );
  }, [settings.customHeaders]);

  const handleAddHeader = () => {
    if (!newHeaderKey.trim() || !newHeaderValue.trim()) {
      return;
    }

    // Check if header already exists
    const existingIndex = headers.findIndex((h) => h.key === newHeaderKey);
    if (existingIndex >= 0) {
      // Update existing header
      const updatedHeaders = [...headers];
      updatedHeaders[existingIndex].value = newHeaderValue;
      setHeaders(updatedHeaders);
    } else {
      // Add new header
      setHeaders([...headers, { key: newHeaderKey, value: newHeaderValue }]);
    }

    setNewHeaderKey("");
    setNewHeaderValue("");
  };

  const handleRemoveHeader = (index: number) => {
    setHeaders(headers.filter((_, i) => i !== index));
  };

  const handleSave = () => {
    // Convert array back to object
    const headersObject = headers.reduce(
      (acc, { key, value }) => {
        if (key.trim() && value.trim()) {
          acc[key] = value;
        }
        return acc;
      },
      {} as Record<string, string>,
    );

    setSettings((s) => ({ ...s, customHeaders: headersObject }));
    navigate(-1);
  };

  const handleCancel = () => {
    navigate(-1);
  };

  return (
    <div className="flex flex-col space-y-2">
      <Logo />
      <span className="text-lg">Custom Headers</span>
      <p className="text-sm text-muted-foreground">
        Add custom HTTP headers that will be sent with every API request.
      </p>
      <hr />

      {/* Existing Headers List */}
      <div className="max-h-64 space-y-2 overflow-y-auto">
        {headers.length === 0 ? (
          <p className="py-4 text-center text-sm text-muted-foreground">
            No custom headers configured
          </p>
        ) : (
          headers.map((header, index) => (
            <div
              key={index}
              className="flex items-center gap-2 rounded-lg border bg-background p-3"
            >
              <div className="flex-1 space-y-1">
                <p className="text-sm font-semibold">{header.key}</p>
                <p className="truncate text-xs text-muted-foreground">
                  {header.value}
                </p>
              </div>
              <Button
                variant="ghost"
                size="sm"
                onClick={() => handleRemoveHeader(index)}
                className="h-8 w-8 p-0 text-destructive hover:text-destructive"
              >
                <Trash2 className="h-4 w-4" />
              </Button>
            </div>
          ))
        )}
      </div>

      <hr />

      {/* Add New Header */}
      <div className="space-y-2">
        <p className="text-sm font-semibold">Add New Header</p>
        <Input
          placeholder="Header Name (e.g., X-Custom-Header)"
          value={newHeaderKey}
          onChange={(e) => setNewHeaderKey(e.target.value)}
          autoCapitalize="none"
        />
        <Input
          placeholder="Header Value"
          value={newHeaderValue}
          onChange={(e) => setNewHeaderValue(e.target.value)}
          autoCapitalize="none"
        />
        <Button
          variant="secondary"
          onClick={handleAddHeader}
          disabled={!newHeaderKey.trim() || !newHeaderValue.trim()}
          className="w-full"
        >
          <Plus className="mr-2 h-4 w-4" />
          Add Header
        </Button>
      </div>

      <hr />

      {/* Action Buttons */}
      <div className="flex gap-2">
        <Button variant="outline" onClick={handleCancel} className="flex-1">
          Cancel
        </Button>
        <Button onClick={handleSave} className="flex-1">
          Save
        </Button>
      </div>
    </div>
  );
}