import React, { useState } from "react";
import { base44 } from "@/api/base44Client";
import { useMutation, useQueryClient, useQuery } from "@tanstack/react-query";
import { useNavigate } from "react-router-dom";
import { createPageUrl } from "@/utils";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { Briefcase, ArrowLeft, Check, Plus, X } from "lucide-react";
import PageHeader from "../components/common/PageHeader";
import { useToast } from "@/components/ui/use-toast";

export default function AddPartner() {
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  const { toast } = useToast();

  const { data: sectors = [] } = useQuery({
    queryKey: ['sectors'],
    queryFn: () => base44.entities.Sector.list(),
    initialData: [],
  });

  const generatePartnerNumber = () => {
    const randomNum = Math.floor(1000 + Math.random() * 9000);
    return `PN-${randomNum}`;
  };

  const [partnerData, setPartnerData] = useState({
    partner_name: "",
    partner_number: generatePartnerNumber(),
    partner_type: "Corporate",
    sector_id: "",
    sector_name: "",
    primary_contact_name: "",
    primary_contact_email: "",
    primary_contact_phone: "",
    billing_address: "",
    sites: [],
    payment_terms: "Net 30",
    is_active: true
  });

  const [newSite, setNewSite] = useState({
    site_name: "",
    address: "",
    city: "",
    state: "",
    zip_code: "",
    site_manager: "",
    site_manager_email: ""
  });

  const createPartnerMutation = useMutation({
    mutationFn: (data) => base44.entities.Partner.create(data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['partners'] });
      toast({
        title: "Partner Created",
        description: "Partner has been successfully added to the platform",
      });
      navigate(createPageUrl("PartnerManagement"));
    },
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    createPartnerMutation.mutate(partnerData);
  };

  const handleSectorChange = (sectorId) => {
    const sector = sectors.find(s => s.id === sectorId);
    setPartnerData({
      ...partnerData,
      sector_id: sectorId,
      sector_name: sector?.sector_name || ""
    });
  };

  const handleAddSite = () => {
    if (newSite.site_name && newSite.address) {
      setPartnerData({
        ...partnerData,
        sites: [...partnerData.sites, newSite]
      });
      setNewSite({
        site_name: "",
        address: "",
        city: "",
        state: "",
        zip_code: "",
        site_manager: "",
        site_manager_email: ""
      });
    }
  };

  const handleRemoveSite = (index) => {
    setPartnerData({
      ...partnerData,
      sites: partnerData.sites.filter((_, i) => i !== index)
    });
  };

  return (
    <div className="p-4 md:p-8 bg-slate-50 min-h-screen">
      <div className="max-w-4xl mx-auto">
        <PageHeader
          title="Add Partner"
          subtitle="Add a new client partner to the platform"
          backTo={createPageUrl("PartnerManagement")}
          backButtonLabel="Back to Partners"
        />

        <form onSubmit={handleSubmit}>
          <Card className="mb-6 border-slate-200 shadow-lg">
            <CardHeader className="bg-gradient-to-br from-slate-50 to-white border-b">
              <CardTitle className="flex items-center gap-2">
                <Briefcase className="w-5 h-5 text-[#0A39DF]" />
                Basic Information
              </CardTitle>
            </CardHeader>
            <CardContent className="p-6 space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <Label htmlFor="partner_number">Partner Number</Label>
                  <Input
                    id="partner_number"
                    value={partnerData.partner_number}
                    readOnly
                    className="bg-slate-50 font-mono"
                  />
                  <p className="text-xs text-slate-500 mt-1">Auto-generated unique ID</p>
                </div>

                <div>
                  <Label htmlFor="partner_type">Partner Type *</Label>
                  <Select onValueChange={(value) => setPartnerData({...partnerData, partner_type: value})} value={partnerData.partner_type}>
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="Corporate">Corporate</SelectItem>
                      <SelectItem value="Education">Education</SelectItem>
                      <SelectItem value="Healthcare">Healthcare</SelectItem>
                      <SelectItem value="Sports & Entertainment">Sports & Entertainment</SelectItem>
                      <SelectItem value="Government">Government</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

                <div className="md:col-span-2">
                  <Label htmlFor="partner_name">Partner Name *</Label>
                  <Input
                    id="partner_name"
                    placeholder="e.g., Google"
                    value={partnerData.partner_name}
                    onChange={(e) => setPartnerData({...partnerData, partner_name: e.target.value})}
                    required
                  />
                </div>

                <div>
                  <Label htmlFor="sector">Sector</Label>
                  <Select onValueChange={handleSectorChange} value={partnerData.sector_id}>
                    <SelectTrigger>
                      <SelectValue placeholder="Select sector" />
                    </SelectTrigger>
                    <SelectContent>
                      {sectors.map((sector) => (
                        <SelectItem key={sector.id} value={sector.id}>
                          {sector.sector_name}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

                <div>
                  <Label htmlFor="payment_terms">Payment Terms</Label>
                  <Input
                    id="payment_terms"
                    placeholder="Net 30"
                    value={partnerData.payment_terms}
                    onChange={(e) => setPartnerData({...partnerData, payment_terms: e.target.value})}
                  />
                </div>

                <div>
                  <Label htmlFor="primary_contact_name">Primary Contact Name</Label>
                  <Input
                    id="primary_contact_name"
                    placeholder="John Doe"
                    value={partnerData.primary_contact_name}
                    onChange={(e) => setPartnerData({...partnerData, primary_contact_name: e.target.value})}
                  />
                </div>

                <div>
                  <Label htmlFor="primary_contact_email">Primary Contact Email</Label>
                  <Input
                    id="primary_contact_email"
                    type="email"
                    placeholder="john@company.com"
                    value={partnerData.primary_contact_email}
                    onChange={(e) => setPartnerData({...partnerData, primary_contact_email: e.target.value})}
                  />
                </div>

                <div>
                  <Label htmlFor="primary_contact_phone">Primary Contact Phone</Label>
                  <Input
                    id="primary_contact_phone"
                    placeholder="(555) 123-4567"
                    value={partnerData.primary_contact_phone}
                    onChange={(e) => setPartnerData({...partnerData, primary_contact_phone: e.target.value})}
                  />
                </div>
              </div>

              <div>
                <Label htmlFor="billing_address">Billing Address</Label>
                <Textarea
                  id="billing_address"
                  placeholder="123 Main St, City, State ZIP"
                  value={partnerData.billing_address}
                  onChange={(e) => setPartnerData({...partnerData, billing_address: e.target.value})}
                  rows={2}
                />
              </div>
            </CardContent>
          </Card>

          <Card className="mb-6 border-slate-200 shadow-lg">
            <CardHeader className="bg-gradient-to-br from-slate-50 to-white border-b">
              <CardTitle>Sites/Locations</CardTitle>
            </CardHeader>
            <CardContent className="p-6 space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 p-4 bg-slate-50 rounded-lg">
                <Input
                  placeholder="Site Name"
                  value={newSite.site_name}
                  onChange={(e) => setNewSite({...newSite, site_name: e.target.value})}
                />
                <Input
                  placeholder="Address"
                  value={newSite.address}
                  onChange={(e) => setNewSite({...newSite, address: e.target.value})}
                />
                <Input
                  placeholder="City"
                  value={newSite.city}
                  onChange={(e) => setNewSite({...newSite, city: e.target.value})}
                />
                <Input
                  placeholder="State"
                  value={newSite.state}
                  onChange={(e) => setNewSite({...newSite, state: e.target.value})}
                />
                <Input
                  placeholder="ZIP Code"
                  value={newSite.zip_code}
                  onChange={(e) => setNewSite({...newSite, zip_code: e.target.value})}
                />
                <Button type="button" onClick={handleAddSite} variant="outline" className="w-full">
                  <Plus className="w-4 h-4 mr-2" />
                  Add Site
                </Button>
              </div>

              {partnerData.sites.length > 0 && (
                <div className="space-y-2">
                  {partnerData.sites.map((site, index) => (
                    <div key={index} className="flex items-center justify-between p-3 bg-white border rounded-lg">
                      <div>
                        <p className="font-semibold">{site.site_name}</p>
                        <p className="text-sm text-slate-500">{site.address}, {site.city}, {site.state} {site.zip_code}</p>
                      </div>
                      <Button
                        type="button"
                        variant="ghost"
                        size="icon"
                        onClick={() => handleRemoveSite(index)}
                      >
                        <X className="w-4 h-4" />
                      </Button>
                    </div>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>

          <div className="flex justify-end gap-3">
            <Button
              type="button"
              variant="outline"
              onClick={() => navigate(createPageUrl("PartnerManagement"))}
            >
              <ArrowLeft className="w-4 h-4 mr-2" />
              Cancel
            </Button>
            <Button
              type="submit"
              className="bg-[#0A39DF] hover:bg-[#0A39DF]/90"
              disabled={createPartnerMutation.isPending}
            >
              <Check className="w-4 h-4 mr-2" />
              {createPartnerMutation.isPending ? "Creating..." : "Create Partner"}
            </Button>
          </div>
        </form>
      </div>
    </div>
  );
}