import { createFileRoute } from "@tanstack/react-router";
import { PageLayout } from "@/components/PageLayout";
import { useLanguage } from "@/hooks/use-language";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";
import { Shield, Zap, Building2, User, Calendar, Key, Globe, Phone, Mail } from "lucide-react";

export const Route = createFileRoute("/_authenticated/license")({
  component: LicensePage,
});

function LicensePage() {
  const { tr } = useLanguage();

  return (
    <PageLayout title={tr("softwareLicense")}>
      <div className="max-w-3xl mx-auto space-y-6">
        {/* Software Info */}
        <Card className="border-primary/30 bg-gradient-to-br from-primary/5 to-transparent">
          <CardHeader className="text-center pb-2">
            <div className="mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-2xl bg-primary/10">
              <Shield className="h-8 w-8 text-primary" />
            </div>
            <CardTitle className="text-2xl">Niyamah Electric & Hardware</CardTitle>
            <p className="text-muted-foreground text-sm">ERP / POS Software</p>
          </CardHeader>
          <CardContent className="text-center">
            <Badge variant="secondary" className="text-sm px-4 py-1">
              Version 1.0.0
            </Badge>
          </CardContent>
        </Card>

        {/* License Details */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-lg">
              <Key className="h-5 w-5 text-primary" />
              {tr("licenseDetails")}
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <InfoRow icon={Building2} label={tr("licensedTo")} value="Niyamah Electric & Hardware" />
              <InfoRow icon={Key} label={tr("licenseType")} value={tr("commercialLicense")} />
              <InfoRow icon={Calendar} label={tr("issueDate")} value="2026-05-04" />
              <InfoRow icon={Calendar} label={tr("expiryDate")} value={tr("lifetime")} />
              <InfoRow icon={Zap} label={tr("licenseStatus")}>
                <Badge className="bg-green-500/20 text-green-600 border-green-500/30 hover:bg-green-500/20">
                  {tr("active")}
                </Badge>
              </InfoRow>
              <InfoRow icon={Globe} label={tr("modules")} value={tr("allModules")} />
            </div>
          </CardContent>
        </Card>

        {/* Developer Info */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-lg">
              <User className="h-5 w-5 text-primary" />
              {tr("developerInfo")}
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <InfoRow icon={User} label={tr("developer")} value="Lovable AI" />
              <InfoRow icon={Globe} label={tr("website")} value="lovable.dev" />
              <InfoRow icon={Phone} label={tr("support")} value="24/7 Online" />
              <InfoRow icon={Mail} label={tr("email")} value="support@lovable.dev" />
            </div>
          </CardContent>
        </Card>

        {/* Terms */}
        <Card>
          <CardHeader>
            <CardTitle className="text-lg">{tr("termsAndConditions")}</CardTitle>
          </CardHeader>
          <CardContent>
            <ul className="list-disc list-inside space-y-2 text-sm text-muted-foreground">
              <li>{tr("licenseTerm1")}</li>
              <li>{tr("licenseTerm2")}</li>
              <li>{tr("licenseTerm3")}</li>
              <li>{tr("licenseTerm4")}</li>
              <li>{tr("licenseTerm5")}</li>
            </ul>
          </CardContent>
        </Card>

        <p className="text-center text-xs text-muted-foreground pb-4">
          © 2026 Niyamah Electric & Hardware. All rights reserved.
        </p>
      </div>
    </PageLayout>
  );
}

function InfoRow({ icon: Icon, label, value, children }: { icon: React.ElementType; label: string; value?: string; children?: React.ReactNode }) {
  return (
    <div className="flex items-center gap-3 p-3 rounded-lg bg-muted/30">
      <Icon className="h-4 w-4 text-muted-foreground shrink-0" />
      <div>
        <p className="text-xs text-muted-foreground">{label}</p>
        {children || <p className="text-sm font-medium">{value}</p>}
      </div>
    </div>
  );
}
