import { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

interface StatusItem {
  label: string;
  value: string;
  confirmed: boolean;
  date?: string;
}

export const StatusCard = () => {
  const [editingField, setEditingField] = useState<string | null>(null);
  const [statusItems, setStatusItems] = useState<StatusItem[]>([
    { 
      label: "Contact Information", 
      value: "Bernadette Bernadette, demo@demo.com, (832) 786-1717, 16427 HICKORY KNOLL DR Houston, TX 12345", 
      confirmed: false 
    },
    { 
      label: "Favorited 3 Grants", 
      value: "", 
      confirmed: true, 
      date: "Aug 18, 2025" 
    }
  ]);

  const handleEdit = (field: string) => {
    setEditingField(field);
  };

  const unconfirmedCount = statusItems.filter(item => !item.confirmed).length;
  const completionPercentage = Math.round(((statusItems.length - unconfirmedCount) / statusItems.length) * 100);

  return (
    <Card className="shadow-lg border-0">
      <CardHeader className="pb-4">
        <div className="flex items-center justify-between">
          <div>
            <CardTitle className="text-2xl mb-2">Ready to Enter Weekly Drawings?</CardTitle>
            <p className="text-muted-foreground">
              Complete these 2 simple steps to be eligible
            </p>
          </div>
          <div className="text-right">
            <div className="text-4xl font-bold text-green-600">{completionPercentage}%</div>
            <div className="text-sm text-muted-foreground">Complete</div>
          </div>
        </div>
      </CardHeader>
      
      <CardContent className="space-y-4 pt-0">
        {statusItems.map((item, index) => {
          const stepNumber = index + 1;
          return (
            <div key={index} className={`relative p-6 rounded-lg border-2 transition-all duration-300 ${
              item.confirmed 
                ? 'bg-green-50 border-green-200' 
                : 'bg-gray-50 border-gray-200 hover:border-primary/50'
            }`}>
              {/* Step Number Circle */}
              <div className="absolute -top-3 left-6">
                <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold ${
                  item.confirmed 
                    ? 'bg-green-500 text-white' 
                    : 'bg-gray-400 text-white'
                }`}>
                  {item.confirmed ? '✓' : stepNumber}
                </div>
              </div>
              
              {/* Step Content */}
              <div className="ml-4">
                <div className="flex items-center justify-between">
                  <div className="flex-1">
                    <h3 className="text-lg font-semibold text-foreground mb-1">
                      Step {stepNumber}: {item.label}
                    </h3>
                    {item.label === "Contact Information" ? (
                      <div className="text-sm text-muted-foreground space-y-1">
                        <div>Name: Bernadette Bernadette</div>
                        <div>Email: demo@demo.com</div>
                        <div>Mobile: (832) 786-1717</div>
                        <div>Address: 16427 HICKORY KNOLL DR Houston, TX 12345</div>
                      </div>
                    ) : (
                      <div className="text-sm text-muted-foreground">
                        <p className="mb-2">Mark 3 grants as favorites in our database</p>
                        {item.confirmed && (
                          <div className="space-y-1 text-xs">
                            <div>✅ Small Business Innovation Research (SBIR) Grant</div>
                            <div>✅ Community Development Block Grant Program</div>
                            <div>✅ Rural Business Development Grant</div>
                          </div>
                        )}
                      </div>
                    )}
                    {item.confirmed && item.date && (
                      <div className="text-xs text-green-600 font-medium mt-1">
                        ✅ Completed {item.date}
                      </div>
                    )}
                  </div>
                  
                  {!item.confirmed && (
                    <div className="flex gap-2 ml-4">
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => handleEdit(item.label)}
                      >
                        Edit
                      </Button>
                      <Button
                        size="sm"
                        onClick={() => {
                          const updatedItems = [...statusItems];
                          updatedItems[index] = { ...updatedItems[index], confirmed: true, date: new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) };
                          setStatusItems(updatedItems);
                        }}
                      >
                        Confirm
                      </Button>
                    </div>
                  )}
                </div>

                {editingField === item.label && item.label === "Contact Information" && (
                  <div className="mt-4 p-4 bg-white rounded-lg border border-gray-200">
                    <h4 className="font-medium mb-3">Edit Your Contact Information:</h4>
                    <div className="space-y-3">
                      <Input defaultValue="Bernadette Bernadette" placeholder="Full Name" className="text-sm" />
                      <Input defaultValue="demo@demo.com" placeholder="Email Address" className="text-sm" />
                      <Input defaultValue="(832) 786-1717" placeholder="Mobile Phone" className="text-sm" />
                      <Input defaultValue="16427 HICKORY KNOLL DR Houston, TX 12345" placeholder="Full Address" className="text-sm" />
                    </div>
                    <div className="flex gap-2 mt-4">
                      <Button size="sm" onClick={() => {
                        const updatedItems = [...statusItems];
                        updatedItems[0] = { ...updatedItems[0], confirmed: true, date: new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) };
                        setStatusItems(updatedItems);
                        setEditingField(null);
                      }}>
                        Save
                      </Button>
                      <Button size="sm" variant="outline" onClick={() => setEditingField(null)}>
                        Cancel
                      </Button>
                    </div>
                  </div>
                )}
              </div>
            </div>
          );
        })}
        
        {/* Success Message */}
        {completionPercentage === 100 && (
          <div className="text-center p-6 bg-gradient-to-r from-green-50 to-blue-50 border-2 border-green-200 rounded-lg">
            <div className="text-green-600 text-3xl mb-3">🎉</div>
            <h3 className="font-bold text-green-800 text-xl mb-2">Congratulations!</h3>
            <p className="text-green-700 font-medium mb-1">
              You've been entered into the Givesback Cash Program!
            </p>
            <p className="text-sm text-green-600">
              Entry Date: {new Date().toLocaleDateString('en-US', { 
                weekday: 'long',
                year: 'numeric', 
                month: 'long', 
                day: 'numeric' 
              })}
            </p>
            <p className="text-xs text-muted-foreground mt-2">
              You're now eligible for all upcoming weekly awards up to $1,000. Good luck!
            </p>
          </div>
        )}
      </CardContent>
    </Card>
  );
};