import React, { useState } from "react";
import { Button } from "@/shared/common/ui/button";
import { Plus, ChevronDown, ChevronRight } from "lucide-react";
import { PlansTable } from "../shared/PlansTable";
import { DeputyData } from "@/performance-management/types/planHierarchyTypes";

interface DeputyViewProps {
  sectorData: DeputyData;
  onAddPlan: (targetId?: string) => void;
}

export const DeputyView: React.FC<DeputyViewProps> = ({
  sectorData,
  onAddPlan,
}) => {
  const [expandedDirectorate, setExpandedDirectorate] = useState<string | null>(
    null
  );

  const toggleDirectorate = (id: string) => {
    setExpandedDirectorate((prev) => (prev === id ? null : id));
  };

  return (
    <div className="space-y-6">
      {/* Sector Plans Overview */}
      <div className="bg-white dark:bg-gray-900 rounded-lg shadow p-6">
        <div className="flex justify-between items-center mb-4">
          <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
            Sector Plans
          </h2>
          <Button onClick={() => onAddPlan()}>
            <Plus className="mr-2 h-4 w-4" />
            Add Sector Plan
          </Button>
        </div>
        <PlansTable plans={sectorData.plans} editable />
      </div>

      {/* Directorates Section */}
      <div className="bg-white dark:bg-gray-900 rounded-lg shadow p-6">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">
          Directorates
        </h2>

        {/* Directorates List */}
        <div className="space-y-2">
          {sectorData.directorates.map((dir) => (
            <div
              key={dir.id}
              className="border border-gray-200 dark:border-gray-700 rounded-lg">
              {/* Directorate Header */}
              <div
                className="flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800"
                onClick={() => toggleDirectorate(dir.id)}>
                <div className="flex items-center gap-3">
                  {expandedDirectorate === dir.id ? (
                    <ChevronDown className="h-5 w-5 text-gray-500" />
                  ) : (
                    <ChevronRight className="h-5 w-5 text-gray-500" />
                  )}
                  <div>
                    <h3 className="font-medium text-gray-900 dark:text-gray-100">
                      {dir.name}
                    </h3>
                    <p className="text-sm text-gray-500 dark:text-gray-400">
                      {dir.planCount} plans • {dir.progress}% complete
                    </p>
                  </div>
                </div>
                <Button
                  size="sm"
                  onClick={(e) => {
                    e.stopPropagation();
                    onAddPlan(dir.id);
                  }}>
                  <Plus className="h-4 w-4 mr-1" />
                  Add Plan
                </Button>
              </div>

              {/* Expanded Directorate Plans */}
              {expandedDirectorate === dir.id && (
                <div className="p-4 border-t border-gray-200 dark:border-gray-700">
                  {dir.plans.length > 0 ? (
                    <PlansTable plans={dir.plans} />
                  ) : (
                    <div className="text-center py-8 text-gray-500 dark:text-gray-400">
                      No plans added yet
                    </div>
                  )}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};
