import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Award, Plus, FileText } from "lucide-react"
import { Textarea } from "@/components/ui/textarea"
import CompanyItem from "./CompanyItem"

export default function CompanyWidget({
  companies,
  setCompanies,
  setCurrentCompany,
  setIsDialogOpen,
  prompts,
  setPrompts,
  resetPrompt,
  popularityCategories,
  popularityColors
}: any) {
  return (
    <Card className="shadow-md">
      <CardHeader className="flex flex-row items-center justify-between">
        <CardTitle>رنکینگ شرکت ها</CardTitle>
        <Button size="sm" onClick={() => {
          setCurrentCompany({ id: null, name: "", description: "", popularity: "معمولی" });
          setIsDialogOpen(true);
        }}>
          <Plus size={16} className="ml-1" /> افزودن شرکت
        </Button>
      </CardHeader>
      <CardContent>
        <div className="mb-4">
          <div className="flex items-center justify-between mb-2">
            <div className="flex items-center gap-2">
              <Award size={18} className="text-purple-500" />
              <h3 className="font-medium">پرامپت رنکینگ شرکت‌ها</h3>
            </div>
            <Button variant="outline" size="sm" onClick={() => resetPrompt('companyRanking')}>
              بازنشانی
            </Button>
          </div>
          <p className="text-sm text-muted-foreground mb-2">
            نحوه استفاده از شرکت‌ها براساس رنکینگ‌شان - متغیر: {'{لیست_شرکت_ها_و_مقدار_محبوبیت}'}
          </p>
          <Textarea
            className="w-full mb-4"
            value={prompts.companyRanking}
            onChange={e => setPrompts({ ...prompts, companyRanking: e.target.value })}
          />
        </div>
        {companies.length === 0 ? (
          <div className="text-center py-8 border-2 border-dashed rounded-lg">
            <FileText className="h-8 w-8 mx-auto mb-2 text-muted-foreground" />
            <p className="mb-3">هنوز شرکتی اضافه نشده است</p>
            <Button size="sm" onClick={() => setIsDialogOpen(true)}>افزودن اولین شرکت</Button>
          </div>
        ) : (
          <div className="space-y-4">
            {popularityCategories.map((category: any) => {
              const categoryCompanies = companies.filter((c: any) => c.popularity === category);
              if (categoryCompanies.length === 0) return null;
              return (
                <div key={category}>
                  <div className="flex items-center mb-2">
                    <div className={`w-2 h-2 rounded-full ${popularityColors[category]} mr-2`}></div>
                    <h3 className="font-medium">{category} ({categoryCompanies.length})</h3>
                  </div>
                  <div className="space-y-2">
                    {categoryCompanies.map((company: any) => (
                      <CompanyItem
                        key={company.id}
                        company={company}
                        setCurrentCompany={setCurrentCompany}
                        setIsDialogOpen={setIsDialogOpen}
                        setCompanies={setCompanies}
                        companies={companies}
                      />
                    ))}
                  </div>
                </div>
              );
            }).filter(Boolean)}
          </div>
        )}
      </CardContent>
    </Card>
  );
}